<template>
    <el-dialog class="mask" :visible.sync="showMask" width="30%" fullscreen>
        <div class="mask" @click.self.stop="showMask = false">
            <!-- 人才简历 -->
            <div class="mask-box" v-show="type == 'invite4'">
                <div class="mask-close el-icon-close" @click="close"></div>
                <div class="mask-content">
                    因用户隐私权限设置，需认证企业用户才可查看个人简历，是否要认证招聘企业？
                </div>
                <div class="mask-btn-wrap">
                    <div class="mask-btn mask-btn-top" @click.stop="back">不了</div>
                    <div class="mask-btn mask-btn-bottom" @click.stop="toAuthenticate()">
                        去认证
                    </div>
                </div>
            </div>

            <!-- 公司 -->
            <div class="mask-box" v-show="type == 'invite6'">
                <div class="mask-close el-icon-close" @click="close"></div>
                <div class="mask-content">
                    屏蔽后不会对你推荐该公司职位，你发布的信息也不会对该公司展示
                </div>
                <div class="mask-btn-wrap">
                    <div class="mask-btn mask-btn-top" @click.stop="close">取消</div>
                    <div class="mask-btn mask-btn-bottom" @click.stop="getShield2()">
                        确定
                    </div>
                </div>
            </div>

            <!-- 监理方面 -->
            <div class="mask-box3" v-show="type == 'yulan'">
                <div class="mask-close el-icon-close" @click="close"></div>
                <!-- <div class="mask-title3">
            模版预览
          </div> -->
                <div class="mask-content3" style="height:auto;">

                    <img :src="item" v-for="(item, index) in imgList" :key="'s' + index" alt="" class="mask-img2" />

                </div>
                <!-- <div class="mask-btn-wrap3">
            <div class="mask-btn3 mask-btn-left">使用模板投递</div>
            <div class="mask-btn3 mask-btn-right">保存到本地</div>
          </div> -->
            </div>

            <!-- 展示未读的认证请求 -->
            <div class="mask-box" v-show="type == 'unRead'">
                <!-- <div class="mask-close el-icon-close" @click="close"></div> -->
                <!-- <div class="mask-content" style="text-align: center; margin-bottom: 12px">
            提示
          </div> -->
                <div class="mask-content-main" style="text-align: center;;">{{ data.content || '暂无认证' }}</div>
                <div class="mask-btn-wrap" style="display: flex;justify-content: space-between;">
                    <div class="mask-btn mask-btn-top" @click.stop="close(), $emit('dealWith', false, data)"
                        style="width: 142px;">
                        拒绝
                    </div>
                    <div class="mask-btn mask-btn-bottom" @click.stop="close(), $emit('dealWith', true, data)"
                        style="width: 142px;background-color: #64b6a8;color: #fff;">
                        同意
                    </div>
                </div>
            </div>
        </div>
    </el-dialog>
</template>
  
<script>
export default {
    props: {
        data: {
            type: Object,
            default() {
                return {};
            }
        },
        data2: {
            type: Object,
            default() {
                return {};
            }
        },
        imgList: {
            type: Array,
            default() {
                return [];
            }
        },
        autoShow: {
            type: Boolean,
            default: false
        },
        autoType: {
            type: String,
            default: ''
        }
    },
    watch: {
        autoShow: {
            handler(newV, oldV) {
                this.showMask = newV

            },
            immediate: true
        },
        autoType: {
            handler(newV, oldV) {
                this.type = newV

            },
            immediate: true
        },

    },
    data() {
        return {
            item: {},
            showMask: false,
            type: "",

            mobanTitle: "",
            resumeLoading: false,
            mobanData: {}
        };
    },
    methods: {
        open(type, option) {
            if (type == "invite3") {
                // 如果是简历魔板
                this.renderMoban(option);
            }

            this.type = type || "invite1";
            this.showMask = true;
        },
        close() {
            this.showMask = false;
        },



    }
};
</script>
  
<style lang="less" scoped>
/deep/ .el-dialog {
    background: rgba(0, 0, 0, 0.2);

    .el-dialog__header {
        display: none;
    }

    .el-dialog__body {
        padding: 0;
    }
}

.mask-img2 {
    width: 80% !important;
    display: block;
    margin: 0 auto;
    height: auto !important;
    object-fit: cover;
    margin-bottom: 24px;
}

.mask {
    // position: relative;

    // background: rgba(0, 0, 0, 0.2);

    .mask-box1 {
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        left: 50%;
    }

    .mask-box {
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        left: 50%;
    }

    .mask-box3,
    .mask-box1,
    .mask-box {
        box-sizing: border-box;

        display: inline-block;
        padding: 40px 35px 20px 35px;
        text-align: left;
        background: #ffffff;
        border-radius: 10px 10px 10px 10px;
        opacity: 1;
        font-size: 24px;
        font-weight: 400;
        color: #333333;
        line-height: 34px;
        width: 432px;

        .mask-close {
            position: absolute;
            color: #999999;
            top: 10px;
            right: 10px;
            font-size: 26px;
            cursor: pointer;
        }

        .mask-content {
            font-size: 24px;
            font-weight: 400;
            color: #333333;
            line-height: 28px;
        }

        .mask-btn-wrap {
            .mask-btn {
                width: 284px;
                height: 50px;
                border-radius: 6px 6px 6px 6px;
                opacity: 1;
                border: 1px solid #64b6a8;
                margin: 0 auto;
                text-align: center;
                font-size: 24px;
                font-weight: 400;
                color: #64b6a8;
                line-height: 50px;
                margin-top: 20px;
                cursor: pointer;
            }
        }
    }

    .mask-box3 {
        width: 692px;
        // height: 1999px;

        position: relative;
        padding-bottom: 50px;
        margin-top: 13%;
        transform: translateX(-50%);
        left: 50%;
        margin-bottom: 50px;

        .mask-title3 {
            height: 39px;
            font-size: 28px;
            font-weight: 400;
            color: #333333;
            line-height: 39px;
            text-align: center;
            margin-bottom: 10px;
        }

        .mask-content3 {
            padding: 0 32px;

            min-height: 781px;
            opacity: 1;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .mask-btn-wrap3 {
            // margin-top: 26px;
            padding: 26px 0 50px;
            display: flex;
            justify-content: space-around;

            .mask-btn3 {
                width: 200px;
                height: 50px;
                background: #64b6a8;
                border-radius: 6px 6px 6px 6px;
                opacity: 1;
                text-align: center;

                font-size: 20px;
                font-weight: 500;
                color: #ffffff;
                line-height: 50px;
                cursor: pointer;
            }
        }
    }
}
</style>
  